import { Tag, Button, Divider } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import CommonTable, { createColumn } from './common/CommonTable'
import ProcessPicker from './ProcessPicker'
import { queryProcessForAppDef } from "../apis/appDefinition"

const EditableProcessList = ({
  value = [],
  onChange,
  disabled
}) => {

  const columns = [
    {
      key: 'name',
      dataIndex: 'name',
      title: '名称'
    },
    {
      key: 'version',
      dataIndex: 'version',
      title: '当前版本',
      width: 100,
      align: 'center',
      render: (text) => {
        return <Tag color="blue">v{text}</Tag>
      }
    },
    {
      key: 'lastUpdatedBy',
      dataIndex: 'lastUpdatedBy',
      title: '更新人',
      width: 100,
      align: 'center',
    },
    createColumn.time({
      dataIndex: 'lastUpdated',
      width: 180,
      title: '更新时间',
    }),
    {
      key: 'action',
      width: 80,
      title: '操作',
      align: 'center',
      render: (rowData) => {
        return <Button
          size="small"
          type="primary"
          danger
          disabled={!disabled}
          onClick={() => {
            handleDeleteProcess(rowData.id)
          }}
        >
          <DeleteOutlined />
        </Button>
      }
    }
  ]

  const handleDeleteProcess = (id) => {
    onChange(value.filter(el => el.id !== id))
  }

  const handlePickProcess = (processes) => {
    onChange(processes.concat(value))
  }

  return <>
    <Divider>app定义中包含的模型</Divider>
    <div>
      <div style={{ margin: '10px 0' }}>
        {
          disabled && <ProcessPicker
            onPick={handlePickProcess}
            disabledKeys={value.map(el => el.id)}
            queryListAction={queryProcessForAppDef}
          ></ProcessPicker>
        }
      </div>
      <CommonTable
        dataSource={value}
        columns={columns}
        scroll={false}
      ></CommonTable>
    </div>
  </>
}

EditableProcessList.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  disabled: PropTypes.bool
}

export default EditableProcessList